<!-- 添加角色 -->
<template>
  <div>
    <el-dialog
      title="创建角色"
      :visible.sync="addDialog"
      width="40%"
      :before-close="handleClose"
      size="mini"
      :close-on-click-modal="false"
    >
      <el-form ref="roleForm" :model="roleForm" label-width="80px" size="mini">
        <el-form-item label="角色名称">
          <el-input v-model="roleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="授权标识">
          <el-input v-model="roleForm.auth"></el-input>
        </el-form-item>
        <!-- <el-form-item label="类型">
          <el-select
            v-model="roleForm.type"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in types"
              :key="item.code"
              :label="item.remark"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="级别">
          <el-input-number
            v-model="roleForm.level"
            :min="0"
            :max="99"
          ></el-input-number>
        </el-form-item> -->
        <el-form-item label="是否启用">
          <el-radio-group v-model="roleForm.enable">
            <el-radio
              v-for="item in enables"
              :key="item.code"
              :label="item.code"
              >{{ item.remark }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分配权限">
          <el-tabs @tab-click="handleClickPerm" v-model="entityTypeCode">
            <el-tab-pane
              :key="index"
              v-for="(item, index) in perms"
              :label="item.remark"
              :name="item.code"
            >
              <div v-if="item.name == 'menu'">
                <el-tree
                  @check="handleCheckApiPerm"
                  :data="item.entityDatum"
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="[2, 3]"
                  :default-checked-keys="[5]"
                  :props="defaultProps"
                >
                </el-tree>
              </div>
              <div v-else>
                <el-checkbox-group @change="handleModifyDataPerm" v-model="dataPermList">
                  <el-checkbox
                    v-for="permItem in item.entityDatum"
                    :key="permItem.id"
                    :label="permItem.id"
                    >{{ permItem.name }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="roleForm.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAddSubmit" size="mini"
            >确定</el-button
          >
          <el-button @click="handleResetRoleForm" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    parents: {
      type: Array,
    },
    types: {
      type: Array,
    },
    enables: {
      type: Array,
    },
    perms: {
      type: Array,
    },
  },
  data() {
    return {
      addDialog: true,
      roleForm: {
        level: 0,
        enable: 1,
      },
      defaultProps: {
        id: "id",
        children: "children",
        label: "name",
      },
      dataPermList: [],
      entityTypeCode: "10000",
      checkedPerms: [],
    };
  },
  created() {
    console.log(this.perms);
  },
  mounted() {},
  methods: {
    /**
     * 重置表单数据
     */
    handleResetRoleForm() {
      this.roleForm = {};
    },
    /**
     * 关闭创建角色对话框
     */
    handleClose() {
      this.handleResetRoleForm();
      this.$emit("close");
    },
    /**
     * 提交创建角色
     */
    handleAddSubmit() {
      this.roleForm.permEntities = this.checkedPerms;
      this.$emit("submit", this.roleForm);
    },
    /**
     * 选择菜单(api权限)
     */
    handleCheckApiPerm(
      checkedNodes,
      checkedKeys,
      halfCheckedNodes,
      halfCheckedKeys
    ) {
      const checkKeys = [];
      checkKeys.push(...checkedKeys.halfCheckedKeys);
      checkKeys.push(...checkedKeys.checkedKeys);
      this.handleModifyPerm(this.entityTypeCode, checkKeys);
    },
    /**
     * 选中数据权限(data权限)
     */
    handleModifyDataPerm(dataPerms){
      this.handleModifyPerm(this.entityTypeCode, dataPerms);
    },
    /**
     * 切换权限类型
     */
    handleClickPerm(val) {
      console.log(this.entityTypeCode);
    },
    /**
     * 权限改变
     */
    handleModifyPerm(typeCode, entityIds) {
      const permDatum = {
        typeCode: typeCode,
        entityIds: entityIds,
      };

      let flag = true;
      for (let i = 0; i < this.checkedPerms.length; i++) {
        if (this.checkedPerms[i].typeCode == permDatum.typeCode) {
          this.checkedPerms[i] = permDatum;
          flag = false;
          break;
        }
      }
      if (flag) this.checkedPerms.push(permDatum);

      console.log("perms->", this.checkedPerms);
    },
  },
};
</script>
<style>
.el-dialog__wrapper {
  top: -60px;
  z-index: 2009;
}

.el-tabs__item {
  line-height: 28px;
}
</style>